<template>
  <!-- tablecommon -->
  <div class="commonBoxmp white-bg">
    <div class="aic jca">
         <el-card>
        <vue-qr
          logoSrc="/public/favicon.ico"
          text="Hello world!"
          :size="200"
          :correctLevel="0"
        ></vue-qr>
        <div style="padding: 14px">
          <span>容错级别 0-3</span>
          <div>
              当前级别0
          </div>
        </div>
      </el-card>
      <el-card>
        <vue-qr
          logoSrc="/public/favicon.ico"
          text="Hello world!"
          :size="200"
            :correctLevel="1"
        ></vue-qr>
        <div style="padding: 14px">
          <span>容错级别 0-3</span>
          <div>
              当前级别1
          </div>
        </div>
      </el-card>

      <el-card>
        <vue-qr
          logoSrc="/public/favicon.ico"
          text="Hello world!"
          :size="200"
          :correctLevel="2"
        ></vue-qr>
        <div style="padding: 14px">
          <span>容错级别 0-3</span>
          <div>
              当前级别2
          </div>
        </div>
      </el-card>
        <el-card>
        <vue-qr
          logoSrc="/public/favicon.ico"
          text="Hello world!"
          :size="200"
          :correctLevel="3"
        ></vue-qr>
        <div style="padding: 14px">
          <span>容错级别 0-3</span>
          <div>
              当前级别3
          </div>
        </div>
      </el-card>
           
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import vueQr from "vue-qr/src/packages/vue-qr.vue";
const router = useRouter();
const route = useRoute();
onMounted(() => {});
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
const count = ref(0);
const state = reactive({});
</script>

<style  scoped lang="scss" >
</style>
